<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video</title>
  <script type="text/javascript" src="js/common.js" charset="utf-8"></script>
  <link rel="stylesheet" href="style/reset.css">
  <link rel="stylesheet" href="style/video.css">
  <link rel="stylesheet" href="style/common.css">
</head>

<body>
  <!-- 最大容器 -->
  <div class="wapper">
    <a href="" name="top"></a>
    <!-- 头部 -->
    <div class="header">
      <div class="head">
        <!-- logo -->
        <div class="logo">
          <a href="index.html"><img src="images/logo.png" alt=""></a>
          <img src="images/logo2.png" alt="">
        </div>
        <!-- 导航栏 -->
        <div class="nav">
          <ul>
            <li>
              <a class="dropbtn" href="index.html">优粤门户</a>
              <!-- 下拉菜单 -->
              <div class="dropdown-content">
                <div class="txtimg">
                  <a href="video.html">优视频</a>
                  <img src="images/home_icon01.png" alt="">
                </div>
                <div class="txtimg">
                  <a href="activity.html">粤文化</a>
                  <img src="images/home_icon02.png" alt="">
                </div>
                <div class="txtimg">
                  <a href="cg.html">有机会</a>
                  <img src="images/home_icon03.png" alt="">
                </div>
              </div>
            </li>
            <li>
              <a class="dropbtn" href="index.html">有啊社区</a>
              <!-- 下拉菜单 -->
              <div class="dropdown-content">
                <div class="txtimg">
                  <a href="news.html">优新闻</a>
                  <img src="images/home_icon02.png" alt="">
                </div>
                <div class="txtimg">
                  <a href="detail.html">优社区</a>
                  <img src="images/home_icon01.png" alt="">
                </div>
                <div class="txtimg">
                  <a href="filmcritics.html">影评人</a>
                  <img src="images/home_icon03.png" alt="">
                </div>
              </div>
            </li>
            <li>
              <a class="dropbtn" href="login.html">登录</a>
            </li>
            <li>
              <a class="dropbtn" href="register.html">注册</a>
            </li>
          </ul>
          <!-- 搜索按钮 -->
          <div class="search">
            <input type="image" name="img_btn" src="images/home_search01.png" />
            <!-- 搜索按钮下拉菜单 -->
            <div class="searchout">
              <div class="search-dropdown">
                <div class="inputbtn">
                  <input type="search" name="search">
                  <input type="button" name="btn" value="GO" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容主体 -->
    <div class="contentout">
      <div class="line"></div>
      <div class="content">
        <h2>精彩视频<span>WONDERFUL VIDEO</span></h2>
        <!-- 视频列表 -->
        <ul class="videoul">
          <li>
            <img src="images/video_pic01.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
          <li>
            <img src="images/video_pic02.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
          <li>
            <img src="images/video_pic03.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
          <li>
            <img src="images/video_pic04.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
          <li>
            <img src="images/video_pic05.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
          <li>
            <img src="images/video_pic06.png" alt="">
            <div class="text">
              <a href="detail.html">《巫师3：狂猎》CG预告震撼发布！血染白狼解救少女</a>
              <div class="icon">
                <img src="images/video_icon01.png" alt="">
                <span>46.6万</span>
                <img src="images/video_icon02.png" alt="">
                <span>699</span>
              </div>
            </div>
            <div class="play">
              <a href="detail.html"><img src="images/video_icon03.png" alt=""></a>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <ul class="pagination">
          <li><a href="#" class="prev">上一页</a></li>
          <li><a href="#" class="active">1</a></li>
          <li> <a href="#">2</a></li>
          <li> <a href="#">3</a></li>
          <li> <a href="#">4</a></li>
          <li><a href="#" class="next">下一页</a></li>
        </ul>
      </div>
    </div>
    <!-- 热门标签 -->
    <div class="abouttagout">
      <div class="abouttag">
        <div class="about">
          <h3>关于清华<span>ABOUT Tsinghua</span></h3>
          <p>清华大学（Tsinghua University）始建于1911年，<br>
            初名清华学堂，是当时清政府建立的留美预备学校，<br>
            1912 年更名为清华学校。为尝试人才的本地培养，<br>
            1925 年设立大学部，同年开办清华国学研究院。<br>
            1928年更名为“国立清华大学”。1937年抗日战争爆发后，<br>
            南迁长沙，与北京大学、南开大学联合办学，<br>
            组建国立长沙临时大学，1938年迁至昆明，改名为......
          </p>
        </div>
        <div class="about">
          <h3>热门标签<span>TAG COLUD</span></h3>
          <div class="tag">
            <a href="">青春校园</a>
            <a href="">爱情</a>
            <a href="">历史</a>
            <a href="">搞笑</a>
            <a href="">数码</a>
            <a href="">毕业会</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="txt"> Copyright © 2013 URFILM 版权所有</div>
    </div>
    <!-- 返回顶部 -->
    <div class="returntop">
      <a href="#top"><img src="images/home_returntop.png" alt=""></a>
    </div>
  </div>
</body>

</html>